<template>
    <div>
        <div style="font-size: 24px;font-weight: bolder">寝室信息管理</div>
        <!-- 信息显示 -->
        <el-row :gutter="10" style="margin-top: 20px">
            <el-col :span="10">
                <!--   个人信息显示   -->
                <el-card class="box-card">
                    <!-- 头像-->
                    <el-upload class="avatar-uploader" action="" :show-file-list="false" :http-request="importManagerAvatar"
                        :before-upload="beforeAvatarUpload">
                        <img style="width: 178px;height: 178px" v-if="managerInfo.avatarUrl" :src="managerInfo.avatarUrl"
                            class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    <!--信息-->
                    <el-form :model="managerInfo" label-position="left" label-width="60px">
                        <el-form-item label="登录名">
                            <el-input v-model="managerInfo.loginName" disabled style="width: 200px"></el-input>
                        </el-form-item>
                        <el-form-item label="昵称">
                            <el-input v-model="managerInfo.nickname" style="width: 200px"></el-input>
                        </el-form-item>
                        <el-form-item label="邮箱">
                            <el-input v-model="managerInfo.email" style="width: 200px"></el-input>
                        </el-form-item>
                        <el-form-item label="性别">
                            <el-tag v-if="managerInfo.sex === '1'">{{ managerInfo.sex | sexFilter }}</el-tag>
                            <el-tag v-else type="danger">{{ managerInfo.sex | sexFilter }}</el-tag>
                        </el-form-item>
                        <el-form-item label="地址">
                            <el-input v-model="managerInfo.address" style="width: 200px"></el-input>
                        </el-form-item>
                    </el-form>
                    <div style="width: 100%;text-align: center">
                        <el-button type="warning" @click="cancel">取消</el-button>
                        <el-button type="success" @click="updateManager" :loading="editLoading">提交</el-button>
                    </div>
                </el-card>
            </el-col>
            <!--  密码修改  -->
            <el-col :span="6" :offset="2">
                <el-card class="box-card">
                    <h2>密码修改</h2>
                    <div>原始密码：</div>
                    <el-input placeholder="请输入原始密码" v-model="originalPassword" show-password
                        style="margin-top: 6px"></el-input>
                    <div style="margin-top: 6px">修改密码：</div>
                    <el-input v-model="bePassword1" show-password style="margin-top: 6px"></el-input>
                    <div style="margin-top: 6px">重复密码：</div>
                    <el-input style="margin-top: 6px" v-model="bePassword2" show-password></el-input>
                    <div style="width: 100%;text-align: center;margin-top: 6px">
                        <el-button type="warning" @click="cancelPassword">取消</el-button>
                        <el-button type="success" @click="updatePassword" :loading="updatePasswordLoading">修改</el-button>
                    </div>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script>


export default {
    name: "Operations",
    data() {
        return {
            //***********************8修改密码
            updatePasswordLoading: false,
            originalPassword: '',
            bePassword1: '',
            bePassword2: '',
            //********************编辑
            editLoading: false,
            managerInfo: {},
            editManager: {},
        }
    },
    mounted() {
        this.managerInfo = JSON.parse(localStorage.getItem("managerInfo"));
    },
    methods: {
        //**********************************修改密码
        //取消修改密码
        cancelPassword() {
            this.originalPassword = '';
            this.bePassword1 = '';
            this.bePassword2 = '';
        },
        //确定修改密码
        updatePassword() {
            //确定修改前，判断重复密码是否相同
            if (this.bePassword2 === '' || this.bePassword1 === '' || this.originalPassword === '') {
                this.$message.error("输入框不能为空！");
                return;
            }
            if (this.bePassword1 !== this.bePassword2) {
                this.$message.error("重复密码不正确！");
                return;
            }
            //密码正则验证
            let reg = /^[\w]{6,16}$/;
            if (!reg.test(this.bePassword1)) {
                this.$message.error("必须是6-16位,可由字母、数字、下划线组成！");
                return;
            }
            //开启按钮加载状态
            this.updatePasswordLoading = true;
            //提交到后台
            request.post("/manager/updatePassword?originalPassword=" + this.originalPassword + "&toPassword=" + this.bePassword2 + "&managerId=" + this.managerInfo.id).then(res => {
                if (res.code === "200") {
                    this.$message.success("修改成功！");
                    //清空本地存储
                    localStorage.removeItem("managerDto");
                    localStorage.removeItem("managerInfo");
                    //跳转到登录页面
                    this.$router.push("/login");
                }
            }).finally(res => {
                this.updatePasswordLoading = false;
            })
        },
        //*********************************修改头像
        importManagerAvatar(param) {
            let formData = new FormData();
            formData.append('managerId', this.managerInfo.id) // 额外参数
            formData.append('file', param.file);
            GlobalUtil.openGlobalLoading("正在上传头像...")
            request.post('/manager/avatarUrl', formData).then(res => {
                if (res.code === "200") {
                    this.$message.success("修改成功！");
                    this.managerInfo.avatarUrl = res.data;
                    //修改本地存储
                    localStorage.setItem("managerInfo", JSON.stringify(this.managerInfo));
                    //触发（调用）
                    pubsub.publish('setManagerInfo');
                    this.adjustDialogVisible = false;
                }
            }).finally(res => {
                GlobalUtil.closeLoading();
            });
        },
        beforeAvatarUpload(file) {
            const isPNG = file.type === 'image/png';
            const isLt2M = file.size / 1024 / 1024 < 0.5;
            if (!isPNG) {
                this.$message.error('上传头像图片只能是 png 格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 500KB!');
            }
            return isPNG && isLt2M;
        },
        //*************************修改基本信息
        updateManager() {

            //判断提交数据
            if (this.managerInfo.nickname === '') {
                this.$message.error("昵称不能为空！");
                return;
            }
            //判断邮箱
            let emailReg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;;
            if (!emailReg.test(this.managerInfo.email)) {
                this.$message.error("邮箱格式不正确！");
                return;
            }
            this.editLoading = true;
            request.post("/manager/update", this.managerInfo).then(res => {
                if (res.code === "200") {
                    this.$message.success("修改成功！");
                    //修改本地存储
                    this.$store.commit("SET_MANAGER_INFO", JSON.stringify(this.managerInfo));
                }
            }).finally(res => {
                this.editLoading = false;
            })
        },
        cancel() {
            this.managerInfo = JSON.parse(localStorage.getItem("managerInfo"));
        },
    },
}
</script>
  
<style scoped></style>